<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="<%=basePath%>static/css/common_css.css" rel="stylesheet" />
<title>订票 | 票务系统</title>
<link rel="stylesheet" href="<%=basePath%>static/css/jquery-ui.min.css" />
<script type="text/javascript"
	src="<%=basePath%>static/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript"
	src="<%=basePath%>static/js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
	$( "#dialog" ).dialog({ autoOpen: false });
	checkP();
});
	function checkP() {
		$("#ticketInfo_id").empty();
		$("input[name='passenger']:checked").each(function(index){
			var passenger = $(this).val().split(",");
			$("#passenger_"+passenger[0]).css("display","none");
			var index = '<td align="center">'+(index+1)+'<input type="hidden" name="orderDetail['+index+'].passenger.passengerId" value="'+passenger[0]+'" /></td>';
			var name=$('<td><div class="pos-rel"><input disabled="disabled" value="'+passenger[1]+'" class="inptxt w110"  style="color:#999999"></div></td>');
			var cardNo=$('<td><div class="pos-rel"><input disabled="disabled" value="'+passenger[2]+'" class="inptxt w110"  style="color:#999999"></div></td>');
			var tel=$('<td><div class="pos-rel"><input disabled="disabled" value="'+passenger[3]+'" class="inptxt w110"  style="color:#999999"></div></td>');
			var del=$('<td title="删除常用联系人"><span class="i-del" onclick="javascript:delPassengerInfo('+passenger[0]+');"></span></td>');
			$('<tr id="tr_id_'+passenger[0]+'"></tr>').append(index).append(name).append(cardNo).append(tel).append(del).appendTo("#ticketInfo_id");
		});
	}
	
	function delPassengerInfo(id){
		$("#"+id).prop("checked",false);
		$("#passenger_"+id).css("display","");
		checkP();
	}
	
	function submitOrder() {
		var flag = false;
		$("input[name='passenger']:checked").each(function(){
			flag=true;
		});
		if(flag) {
			$("#submitForm").submit();
		} else {
			alert("至少选择一条乘车人信息");
		}
	}
</script>
</head>
<body>
<!--header start-->
<div class="header"><div style="z-index: 2000" class="header-bd">
<a href="<%=basePath %>login/index"><h1 class="logo">票务中心</h1>
</a>
<div class="login-info"><div class="phone-link">
</div>
<div class="menu">
</div>
<span class="login-txt" style="color: #666666"><span>意见反馈:12345@163.com </span>
<c:if test="${sessionScope.user!=null }">
<span style="width:50px;">${sessionScope.user.userName }</span>
| <a id="regist_out" href="<%=basePath %>login/loginOut">退出</a>
</c:if>
<c:if test="${sessionScope.user==null }">
请
<a id="login_user" href="<%=basePath %>login/toLogin" class="colorA" style="margin-left:-0.5px;">登录</a>
|<a id="regist_out" href="<%=basePath %>login/toRegister">注册</a>
</c:if>
</span>
</div>
<div class="nav"><ul><li><a href="<%=basePath %>login/index">客运首页</a>
</li>
<li id="selectYuding"><a href="<%=basePath %>order/searchTickets"  >车票预订</a>
</li>

<li><a href="<%=basePath %>ticket/searchTicketsByCon" target="_blank">车次查询</a>
</li>
<li><a href="<%=basePath %>ticket/searchTicketsByCon" target="_blank">票价查询</a>
</li>
<li><a href="<%=basePath %>ticket/searchTicketsByCon" target="_blank">站点查询</a>
</li>
<c:if test="${sessionScope.user!=null }">
<li ><a href="<%=basePath %>login/main">个人中心</a>
</li>
</c:if>
</ul>
</div>
</div>
</div>
	<!--header end-->
	<!--页面主体  开始-->
<div class="content" style="min-height: 424px;"><!--列车信息 开始-->
<form id="submitForm" method="post" action="<%=basePath %>order/saveOrder" >
<input name="ticketOrder.id" type="hidden" value="${ticketOrder.id }">
<input name="ticketOrder.ticketNumber" type="hidden" value="${ticketOrder.ticketNumber }">
<input name="ticket.ticketId" type="hidden" value="${ticketOrder.ticket.ticketId }">
<input name="startTime" type="hidden" value="<fmt:formatDate value="${ticketOrder.startTime }" pattern="yyyy-MM-dd HH:mm:ss"/>">
<div class="layout t-info"><div class="lay-hd">
				列车信息<span class="small">（以下余票信息仅供参考）</span>
</div>
<div class="lay-bd"><p class="t-tit" id="ticket_tit_id">
<strong class="mr5"><fmt:formatDate value="${ticketOrder.startTime}" pattern="yyyy-MM-dd"/></strong>
<strong class="ml5">${ticketOrder.ticket.ticketNo}</strong>次
<strong class="ml5">${ticketOrder.ticket.startStation}</strong>站
<strong>（<fmt:formatDate value="${ticketOrder.startTime}" pattern="HH:mm:ss"/>开）—${ticketOrder.ticket.endStation}</strong>站
</p>
<p class="t-con" id="ticket_con_id">
<span id="ticket_status_id" class="s1">剩余票数
（<span class="colorA"><fmt:formatNumber value="${ticketOrder.ticketPrice}" type="currency" /></span>）
${ticketOrder.ticketNumber} &nbsp;张票</span>
</p>
</div>
</div>
<!--乘客信息 开始-->
<div class="layout person"><div class="lay-hd">
				乘客信息<span class="small" id="psInfo">（填写说明）</span>
<!-- <div class="s-box"><input id="quickQueryPassenger_id" value="输入乘客姓名" class="txt" type="text">
<input id="submit_quickQueryPassenger" class="sub" type="submit">
</div> -->
</div>
	<div class="lay-bd">
		<div class="per-sel">
			<div class="item clearfix"><h2 class="cy" id="normal_passenger_image_id" title="常用联系人" style="">常用联系人</h2>
				<ul id="normal_passenger_id">
					<c:forEach items="${passengers }" var="passenger" >
						<li id="passenger_${passenger.passengerId }">
							<input class="check" id="${passenger.passengerId }" name="passenger"  type="checkbox" onclick="checkP();"
							 value="${passenger.passengerId},${passenger.passengerName},${passenger.cardNo},${passenger.passengerTel }" >
							<label class="colorA" style="cursor: pointer">${passenger.passengerName }</label>
						</li>
					</c:forEach>
				</ul>
			</div>
		</div>
		<table class="per-ticket">
			<tbody>
				<tr>
					<th rowspan="1" colspan="1" width="28">序号</th>
					<th rowspan="1" colspan="1">姓名</th>
					<th rowspan="1" colspan="1">证件号码</th>
					<th rowspan="1" colspan="1">手机号码</th>
					<th rowspan="1" colspan="1" width="70"></th>
				</tr>
			</tbody>
			<tbody id="ticketInfo_id">
			</tbody>
		</table>
		<div><img src="/otn/resources/images/ins_ad2.png" alt="">
		</div>
	</div>
</div>
</form>
<!--乘客信息 结束-->
<br><br><br>
<div class="lay-btn"><a id="preStep_id" href="<%=basePath %>order/searchTickets" class="btn92" shape="rect">上一步</a>
<a id="submitOrder_id" href="javascript:void(0);" onclick="submitOrder();" class="btn92s" shape="rect">提交订单</a>
</div>
</div>
	<!--页面主体  结束-->
	<!--页面底部  开始-->
	<div class="footer">
		<p>
			<a href="javascript:void(0);" >关于我们</a>
			|<a href="javascript:void(0);" >网站声明</a>
		</p>
		<p>版权所有 © 2008-2017 中国铁路信息技术中心 中国铁道科学研究院</p>
		<p>京ICP备15003716号-3&nbsp;&nbsp;|&nbsp;&nbsp;京ICP证150437号</p>
	</div>
	<!--页面底部  结束-->
<div	 id="dialog" title="购票确认" >
	<div class="up-box-bd ticket-check">
	<div class="info2" id="check_ticket_tit_id">
	<strong class="mr5">2018-09-30（周日）</strong>
	<strong class="ml5">K566</strong>次<strong class="ml5">太原</strong>站<strong>（15:55开）—徐州</strong>站
	</div>
	<table class="table-a"><tbody>
	<tr><th rowspan="1" colspan="1" width="28">序号</th>
		<th rowspan="1" colspan="1">姓名</th>
		<th rowspan="1" colspan="1">证件号码</th>
		<th rowspan="1" colspan="1">手机号码</th>
	</tr>
	</tbody>
	<tbody id="check_ticketInfo_id">
	<tr>
	<td align="center">1</td>
	<td title="周振山">周振山</td>
	<td>320382198807105017</td>
	<td>18912386166</td>
</tr>
</tbody>
</table>
<p id="sy_ticket_num_id">本次列车，余票<strong>144</strong>张。</p>
<div class="lay-btn" id="confirmDiv" style="padding: 10px 0px;">
<a id="back_edit_id" href="javascript:" class="btn92" shape="rect">返回修改</a>
<a href="javascript:" class="btn92s" id="qr_submit_id" shape="rect">确认</a>
</div>
</div>
</div>
	</body>
	</html>